<template>
	<body-wrap>
		<view class="toptabbox" v-if="ctgList && ctgList.length>0">
			<view class="imnbox">
				<my-tab :lists="ctgList" @change="reGetData"/>
			</view>
			<view class="allctgBtn" @click="setMenu">
				<i class="iconfont icon-caidan"></i>
			</view>
		</view>
		<teacher-list :lists="teacherlist || []"/>
		<empty v-if="teacherlist && teacherlist.length==0"/>
		
		<view class="allCtgBox" v-if="showFlag">
			<view class="hdtopBox">
				<view class="close" @click="showFlag=false">
					<i class="iconfont icon-guanbi"></i>
				</view>
			</view>
			<view class="myChannelBox">
				<view class="title">
					<view class="lab">我的分类
						<!-- <text class="txt">点击进入分类</text> -->
					</view>
					<!-- <view class="editBtn" v-if="editChannel" @click="editChannel=true">完成</view>
					<view class="editBtn" v-else @click="editChannel=true">编辑</view> -->
				</view>
				<view class="pdList">
					<view class="pdItem" v-for="dt in nemus" :key="dt._id" @click="delNemu(dt._id)">
						<view class="add" v-if="editChannel"><i class="iconfont icon-guanbi"></i></view>
						{{dt.name}}
					</view>
				</view>
			</view>
			<view class="myChannelBox">
				<view class="title">
					<view class="lab">所有分类</view>
				</view>
				<view class="pdList">
					<template v-for="dt in allClassify" :key="dt._id">
						<view v-if="nemus.find(item =>item._id==dt._id)" class="pdItem pdItem2 noused">
							{{dt.name}}
						</view>
						<view v-else class="pdItem pdItem2" @click="addNemu(dt._id)">
							<view class="add"><i class="iconfont icon-jia"></i></view>
							{{dt.name}}
						</view>
					</template>
				</view>
			</view>
		</view>
	</body-wrap>
	
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	import {getUserList,getClassifyList,getHobbyList,hobbyMany,hobbyAdd,hobbyDel} from "@/api/consult.js"
	import {getAccessToken} from '@/api/qy-wechat-api.js'
	import {setStorage} from '@/utils/common.js'
	import empty from "@/components/empty/index.vue"
	import myTab from "@/components/myTab/index.vue"
	import bodyWrap from "@/components/bodyWrap/index.vue"
	import teacherList from "@/components/teacherList/index.vue"
	export default defineComponent({
		components:{
			empty,
			bodyWrap,
			myTab,
			teacherList
		},
		props:{
		
		},
		setup(props,context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()
			
			const state = reactive({
				msg:'123459',
				userInfo:computed(()=>store.state.base.userInfo),
				imgUrlPrefix:getApp().globalData.imgUrlPrefix,
				teacherlist:'',
				ctgList:'',
				pageIndex:1,
				pageSize:20,
				classify:null,
				showFlag:false,
				editChannel:true,
				nemus:'',
				allClassify:[]
			})
			
			onLoad( async (options)=>{
				// 获取用户自定义菜单
				getNemu()
				
				getTcList() // 教师列表
				
			})
			
			onShow(()=>{
				
			})

			onMounted(async ()=>{

			})
			
			const getNemu = async () =>{
				state.ctgList = [{name:'全部',_id:''}]
				const res = await getHobbyList({
					userId:state.userInfo._id,
					type:2
				})
				
				if(res.data.data && res.data.data.length>0){
					state.nemus = []
					res.data.data.forEach(item =>{
						let obj = {
							name:item.classifyId.name,
							_id:item.classifyId._id
						}
						state.ctgList.push(obj)
						state.nemus.push(obj)
					})
				}else{
					// 获取分类
					getClassifyList({
						from:'EJConsult',
						pageIndex:1,
						pageSize:4,
					}).then(res =>{
						
						if(res.data.data && res.data.data.length>0){
							state.ctgList = [...state.ctgList,...res.data.data]
							// 为用户添加默认菜单
							let arr = []
							res.data.data.forEach(item =>{
								const obj = {
									userId:state.userInfo._id,
									type:2,
									classifyId:item._id
								}
								arr.push(obj)
							})
							hobbyMany(arr) // 批量添加
							state.nemus = res.data.data
						}
					})
				}
			}
			
			const getTcList = async ()=>{
				const res = await getUserList({
					type:1,
					pageIndex:state.pageIndex,
					pageSize:state.pageSize,
					from:'EJConsult',
					classify:state.classify
				})
				state.teacherlist = res.data.data || []
			}
			
			const reGetData = ctgId => {
			  state.classify = ctgId
			  getTcList()
			}
			
			const setMenu = async ()=>{
				state.showFlag = true
				// 获取所有分类
				const res = await getClassifyList({
					from:'EJConsult'
				})
				state.allClassify = res.data.data
			}
			const addNemu = async (id)=>{
				const res = await hobbyAdd({
					userId:state.userInfo._id,
					type:2,
					classifyId:id
				})
				getNemu() // 重新获取菜单
			}
			
			const delNemu = async (id)=>{
				if(!state.editChannel) return
				const res = await hobbyDel({
					userId:state.userInfo._id,
					type:2,
					classifyId:id
				})
				getNemu() // 重新获取菜单
			}
			
			return {
				...toRefs(state),
				reGetData,
				setMenu,
				addNemu,
				delNemu
			}
		}
	})
</script>

<style lang="scss" scoped>
	.topSearch{
		height: 80rpx;
		box-sizing: border-box;
		padding: 0;
		margin:20rpx 20rpx 0 20rpx;
		input{
			box-sizing: border-box;
			border: 0;
			width: 100%;
			height: 100%;
			font-size: 28rpx;
			padding: 0 20rpx;
			border-radius: 5px;
			background:#eee;
		}
	}
	.toptabbox{
		display: flex;
		padding: 0 0 0 20rpx;
		.imnbox{
			flex-shrink: 0;
			flex: 1;
		}
		.allctgBtn{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 80rpx;
			background: #fcf7ee;
			box-shadow: -10px -5rpx 10px #fcf7ee;
			font-size: 30rpx;
			color: #000;
			&:hover{
				background-color: #fff;
			}
		}
	}
	.allCtgBox{
		position:fixed;
		z-index: 3000;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: #fff;
		.hdtopBox{
			height: 80rpx;
			.close{
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
				width: 80rpx;
				.iconfont{
					font-size: 40rpx;
				}
			}
		}
		.myChannelBox{
			padding: 20rpx;
			.title{
				display: flex;
				.lab{
					flex: 1;
					font-size: 32rpx;
					font-weight: 600;
					.txt{
						font-size: 24rpx;
						color: #999;
						padding: 0 0 0 20rpx;
					}
				}
				.editBtn{
					font-size: 26rpx;
					color: #9d0000;
				}
			}
		}
		.pdList{
			padding: 10rpx 0 0 0;
			&::after{
				content: '';
				display: block;
				clear: both;
				line-height: 0;
				padding: 0;
				height: 0;
			}
			.pdItem{
				float: left;
				position: relative;
				z-index: 10;
				background: #f4f5f7;
				color: #000;
				padding: 20rpx 40rpx;
				margin: 20rpx 20rpx 0 0;
				border-radius: 10rpx;
				&.noused{
					color: #999;
				}
				&.pdItem2{
					background: none;
					border: 1px solid #c8c8c8;
				}
				.add{
					position: absolute;
					z-index: 10;
					width: 40rpx;
					height: 40rpx;
					right: 0;
					top: 0;
					text-align: right;
					padding: 3px 3px 0 0;
					.iconfont{
						font-size: 22rpx;
						color: #333;
					}
				}
			}
		}
	}
</style>
